<template>
  <div>
    <el-card class="mb">
      <div class="title mb">会议配置</div>
      <el-form :inline="true" label-width="100px">
        <el-form-item label="会议名称：">
          <el-input v-model="form.meetingName" placeholder="选输入"></el-input>
        </el-form-item>
        <el-form-item label="创建时间：">
          <el-date-picker
            v-model="form.createTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="会议类型：">
          <el-select v-model="form.type" clearable>
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-button
        type="primary"
        @click="addEditOpen(null, '新增')"
        icon="el-icon-plus"
        class="mb"
        v-if="!onlyLook"
        >新建</el-button
      >

      <Table
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        :pageSize="pageSize"
        :current="pageNum"
        :total="total"
        :tableData="tableData"
        :tabtitle="tabTitle"
        :loading="loading"
        height="calc(100vh - 346px)"
      >
        <el-table-column
          align="center"
          label="操作"
          width="300"
          v-if="!onlyLook"
        >
          <template slot-scope="scope">
            <el-button type="text" @click="addEditOpen(scope.row, '编辑')"
              >编辑</el-button
            >
            <el-button type="text" @click="addEditOpen(scope.row, '复制')"
              >复制</el-button
            >
            <el-button type="text" @click="openConfig(scope.row)"
              >配置模板</el-button
            >
            <el-button
              type="text"
              @click="sureGenerate(scope.row)"
              :disabled="scope.row.state != '0'"
              >立即生成</el-button
            >
            <el-button type="text" @click="deleteData(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </Table>
    </el-card>
    <AddEdit ref="addEdit"></AddEdit>
  </div>
</template>

<script>
import AddEdit from './components/AddEdit.vue'
import Table from '@/components/Table.vue'
import { getDetailByAccountOrId, getSelf, getUserInfo } from '@/apis/Common.js'
import {
  list,
  del,
  updateIsGenerate,
  findAllByMeetingId
} from '@/apis/meetingConfiguration.js'
import { getRealToken,getAccessToken } from '@/utils/util'

export default {
  components: {
    Table,
    AddEdit
  },
  data() {
    return {
      form: {
        indexName: '',
        createTime: '',
        type: ''
      },
      onlyLook: false,
      pageSize: 10,
      pageNum: 1,
      total: 0,
      tableData: [],
      typeList: [
        {
          value: '0',
          label: '月度会议'
        },
        {
          value: '1',
          label: '季度会议'
        },
        {
          value: '2',
          label: '年度会议'
        },
        {
          value: '3',
          label: '临时会议'
        }
      ],

      loading: false,

      tabTitle: [
        { prop: 'meetingName', label: '会议名称' },
        { prop: 'describe', label: '会议描述' },
        {
          prop: 'type',
          label: '会议类型',
          width: 120,
          render: (h, scope) => {
            return h('div', scope.row.typeDesc)
          }
        },
        { prop: 'createTime', label: '创建时间', sortable: true, width: 180 },
        {
          prop: 'state',
          label: '状态',
          width: 120,
          render: (h, scope) => {
            return h(
              'div',
              {
                attrs: {
                  class:
                    scope.row.state == '0' ? 'type-warning' : 'type-success'
                }
              },
              scope.row.stateDesc
            )
          }
        }
      ]
    }
  },
  mounted() {
    this.getListData()
    this.getUserRole()
  },
  methods: {
    async getUserRole() {
      try {
        const accessObj = getRealToken()
        const isCheckOut = accessObj?.isCheckOut
        let res = null
        if (isCheckOut) {
          const resInfo = await getSelf()
          res = await getUserInfo(resInfo.tenantId)
        } else {
          res = await getDetailByAccountOrId({
            account: sessionStorage.getItem('currentUser')
              ? JSON.parse(sessionStorage.getItem('currentUser')).account
              : null
          })
        }
        if (res?.role?.roleCode?.length > 0) {
          const roleCode = res.role.roleCode.split('|')
          const arr = roleCode
            .map((roleCode) =>
              ['hygczmkcy-gcy', 'hygczmkjt-gcy'].indexOf(roleCode)
            )
            .filter((index) => index !== -1)
          if (arr.length > 0) {
            this.onlyLook = true
          } else {
            this.onlyLook = false
          }
        } else {
          this.onlyLook = true
        }
      } catch (error) {
        this.onlyLook = true
      }
    },
    deleteData(row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await del(row.id)

          if (res.code === 200) {
            this.getListData()
            this.$message.success('删除成功')
          } else {
            this.$message.error(res.data || '删除失败！')
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    getListData() {
      this.loading = true
      list({
        ...this.form,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      })
        .then((res) => {
          if (res.code === 200) {
            let { total, list } = res.data
            this.tableData = list || []
            this.total = total || 0
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },

    search() {
      this.pageNum = 1
      this.getListData()
    },

    reset() {
      this.form = this.$options.data().form
      this.allPagesArr = this.$options.data().allPagesArr
      this.getListData()
    },

    addEditOpen(row, type) {
      this.$refs.addEdit.show(row, type)
    },

    handleSizeChange(val, index) {
      this.pageSize = val
      this.getListData()
    },
    handleCurrentChange(val, index) {
      this.pageNum = val
      this.getListData()
    },

    async sureGenerate(row) {
      let canSet = await findAllByMeetingId(row.id)
      if (canSet.code === 200 && canSet.data.length > 0) {
        const res = await updateIsGenerate({ id: row.id })
        if (res.code === 200) {
          this.$message.success('已生成会议！')
          this.getListData()
        } else {
          this.$message.error(res.data || '生成会议失败！')
        }
      } else {
        this.$confirm('未查询到模板信息，不能生成, 是否立即配置模板?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$router.push({
              path: '/configurationTemplate',
              query: {
                meetingId: row.id,
                access_token: getAccessToken()
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消配置'
            })
          })
      }
    },
    // 配置会议
    openConfig(row) {
      this.$router.push({
        path: '/configurationTemplate',
        query: {
          meetingId: row.id,
          access_token: getAccessToken()
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.title {
  font-size: 20px;
  font-weight: bold;
}
.mb {
  margin-bottom: 20px;
}
</style>
